<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box2 {
            width: 50px;
            height: 50px;
            background-color: aqua;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <h3>demo1: 点击按钮，让数字+1</h3>
        <h3>{{num}}</h3>
        <button @click="num++">点击我，让数字+1</button>
        <button @click="reset">点击我，让数字归零</button>

        <h3>demo2: 事件函数的默认参数</h3>
        <button @click="printE">点我打印默认参数event</button>

        <h3>demo3: 带参数的点击事件</h3>
        <button @click="alert('迪丽热巴')">点击我， 在弹框里显示出用户姓名</button>

        <h3>demo4:阻止冒泡</h3>
        <div class="box1" @click="handleClick1">
            <div class="box2" @click.stop="handleClick2"></div>
        </div>

        <h3>demo5: 阻止默认事件</h3>
        <form>
            <label for="username">
                输入用户名：
            </label>
            <input type="text" id="username" autocomplete="off">
            <button @click.prevent="submit">点击提交</button>
        </form>

        <h3>demo6: 只当事件是从侦听器绑定的元素本身触发时才触发回调。</h3>
        <p>给box1加上.self修饰符， 也能起到阻止冒泡的效果</p>
        <div class="box1" @click.self="handleClick1">
            <div class="box2" @click="handleClick2"></div>
        </div>

        <h3>demo7: 只当事件是从特定键触发时才触发回调</h3>
        <p>keycode在未来版本中已被移除，在此不做讨论</p>
        <p>还在用的是键盘名，但是一定是选中后的点击才有效。不选中是无效的。</p>
        <button @click.enter="handleEnter">点击enter键，触发事件</button>

        <h3>demo8:  只触发一次回调</h3>
        <p>事件只在页面第一次渲染后的第一次操作时起作用。 后续的操作，都不会调用事件对应的函数。</p>
        <button @click.once="handleOnce">重复点击试一下，点击事件会触发几次呢？</button>

        <h3>demo9: 只当点击鼠标左键时触发。</h3>
        <p>对等的，.right就是只当点击鼠标右键时触发</p>
        <p>.middle是只当点击鼠标中键时触发</p>
        <button @click.left="handleLeft">点击左键触发事件</button>

        <h3>demo10: 可以用对象的方式，同时绑定多个事件</h3>
        <div class="box1" v-on="{mousedown: handleDown, mouseup: handleUp}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num: 0,
                }
            },
            methods: {
                reset() {
                    this.num = 0;
                },
                printE(e) {
                    console.log('默认参数： ', e);
                },
                handleClick1() {
                    console.log('box1被点击了');
                },
                handleClick2() {
                    console.log('box2被点击了');
                },
                submit() {
                    alert('提交表单了');
                },
                handleEnter() {
                    alert('点击了enter键，数据被提交了！');
                },
                handleOnce() {
                    alert('点击了按钮');
                },
                handleLeft() {
                    alert('用户点击了左键');
                },
                handleDown() {
                    console.log('按下了鼠标');
                },
                handleUp() {
                    console.log('松开了鼠标');
                }
            }
        })
    </script>
    <h3>
        <ol>
            <li>
                v-on是一个添加事件的指令，语法：<br>
                v-on:事件名="函数名"
            </li>
            <li>
                v-on: 可以缩写为@符号。 即： @事件名="函数名"
            </li>
            <li>
                事件函数中，有个默认参数是$event , 如demo2中的打印结果。<br>
                在有参数的情况下， 需要在函数名中传入$event实参， 然后在函数中的形参中获取。
            </li>
            <li>
                修饰符<br>
                .stop - 调用 event.stopPropagation()。<br>
                .prevent - 调用 event.preventDefault()。<br>
                .capture - 添加事件侦听器时使用 capture 模式。<br>
                .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。<br>
                .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。<br>
                .native - 监听组件根元素的原生事件。<br>
                .once - 只触发一次回调。<br>
                .left - (2.2.0) 只当点击鼠标左键时触发。<br>
                .right - (2.2.0) 只当点击鼠标右键时触发。<br>
                .middle - (2.2.0) 只当点击鼠标中键时触发。<br>
                .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
            </li>
            <li>
                当子盒子和父盒子都存在事件时，对子盒子的操作会冒泡到父盒子身上，从而触发父盒子的事件。 对子盒子事件阻止冒泡后， 两者的事件就不会互相打扰，对谁操作，就只会触发谁身上的事件。
            </li>
            <li>
                当提交表单时， 会有个明显的刷新页面效果， .prevent可以阻止该默认事件。
            </li>
        </ol>
    </h3>
</body>
</html>